<template>
  <div v-if="showDownload">
    <el-button type="primary" class="download"
               icon="el-icon-download" round plain
               @click="download">下载答卷数据</el-button>
  </div>
  <div>
    <el-container>
      <el-header style="margin-left: 3%">
        <el-affix :offset="20">
          <el-page-header class="head" icon="el-icon-arrow-left" @back="goBack">
            <template #content>
              <div>
                <span style="float: none">详细内容</span>
              </div>
            </template>
          </el-page-header>
        </el-affix>
      </el-header>
      <el-container>
        <el-affix :offset="120">
          <el-aside width="200px" style="margin-left: 20%">
            <nav-bar @downloadClick="downloadClick"
                     @analysisClick="analysisClick"
                     @crossClick="crossClick"></nav-bar>
          </el-aside>
        </el-affix>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>


</template>

<script>
import NavBar from '../components/NavBar'
import qs from "qs";
import axios from "axios";
export default {
  name: "Main",
  created() {
    this.getInfo()
  },
  components:{
    NavBar,
  },
  data() {
    return {
      showDownload: false,
      questionnaireTitle: '',
      questions: []
    }
  },
  methods: {
    getInfo() {
      const questionnaireId = this.$route.query.questionnaireId
      const data = {
        questionnaireId: questionnaireId
      }
      axios.post('/api/questionnaire/getInfo', qs.stringify(data)).then((res => {
        if(res.data.code === 0) {
          this.questionnaireTitle = res.data.data.questionnaireTitle
          this.questions = res.data.data.questions
        } else {
          this.$message.error(res.data.msg)
        }
      }))
    },
    goBack() {
      const { href } = this.$router.resolve({
        path: '/qamanage',
      });
      window.open(href,'_self')
    },
    downloadClick() {
      this.showDownload = true
    },
    analysisClick() {
      this.showDownload = false
    },
    crossClick() {
      this.showDownload = false
    },
    download() {
      // const data = {
      //   questionnaireId: this.$route.query.questionnaireId
      // }
      const {href} = this.$router.resolve({
        path: '/api/questionnaireRecord/download',
        query: {
          questionnaireId: this.$route.query.questionnaireId
        }
      })
      window.open(href, '_blank')
      // axios.get('/api/questionnaireRecord/download',{params:data}).then((res) => {
      //   console.log(res);
      // })

    }
  }
}
</script>

<style scoped>
.el-header {
  /*background-color: #B3C0D1;*/
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  /*background-color: #666666;*/
  color: #333;
  text-align: center;
  line-height: 200px;
}

/*.el-main {*/
/*  !*background-color: #E9EEF3;*!*/
/*  color: #333;*/
/*  text-align: center;*/
/*  line-height: 160px;*/
/*}*/

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}

.download {
  position: fixed;
  top: 25px;
  right:150px;
}
</style>